<template>
  <div>
    <h1>Music的子组件</h1>
    姓名：{{ name }} 爱好：{{ hobby }}
  </div>
</template>

<script>
  export default {
    name: "Item",
    data() {
      return {
        name: "",
        hobby: "",
      };
    },
    mounted() {
      const { name, hobby } = this.$route.query;

      this.name = name;
      this.hobby = hobby;
    },
    // watch: {
    //   //     * 使用watch监听$route
    //   // 1. 不需要深度监听,因为每次得到的都是一个新的$route对象
    //   // 2. 在watch的回调函数中拿到的就是最新的$route

    //   $route: {
    //     handler() {
    //       const { name, hobby } = this.$route.query;
    //       this.name = name;
    //       this.hobby = hobby;
    //     },
    //   },
    // },
    watch: {
      $route: {
        handler() {
          const { name, hobby } = this.$route.query;
          this.name = name;
          this.hobby = hobby;
        },
      },
    },
  };
</script>

<style></style>
